var availWidth,availHeight,screenRatio,ly=270;
var onTouch=false,onReverse=false,centerKey='L-2',lastCenterKey='',defaultY=0,targetKey='';
var reverseKeyId = -1,reverseKey,moveTimes=0;
var reverseF = false,ll=0,lr=0;
  var bgOptions = {
    circleX:595,
    circleY:482,
    circleRadius:323.5,
    scale:1,
    ratio:0.635,
    bgWidth:640,
    bgHeight:1008
  }
  var circleDefault = {
    degreeDelta:30
  };
  var links = 
  {
    'L-0':[0,330,330,'http://sipingsifa.flzhan.com/text83.html'],
    'L-1':[1,300,300,'http://sipingsifa.flzhan.com/text85.html'],
    'L-2':[2,270,270,'http://sipingsifa.flzhan.com/text86.html'],
    'L-3':[3,240,240,'http://sipingsifa.flzhan.com/text87.html'],
    'L-4':[4,210,210,'http://sipingsifa.flzhan.com/text89.html']
  };
  window.addEventListener('DOMContentLoaded',circularMenuInit);
  function circularMenuInit(){
    var initdeg,lele;
    availWidth = document.body.scrollWidth;
    availHeight = document.body.scrollHeight;
    screenRatio = (availWidth/availHeight).toFixed(3);
    reCalculate(screenRatio);
    ll = document.querySelector('.circularLink').offsetWidth;
    lr = document.querySelector('.circularLink').offsetHeight;

    window.addEventListener('touchstart',function(e){
      e.preventDefault();
      e.stopPropagation();
      if(onReverse) return;
      document.querySelector('.center').className = document.querySelector('.center').className.replace(' center','');
      onTouch = true;
    });
    window.addEventListener('touchend',function(e){
      if(onReverse) return;
      ly=270;
      if(onTouch && moveTimes>4) {
        fixPosition();
      }else{
        onLinkClicked(e.target);
        document.querySelector('.'+centerKey).className+=' center';
      }
      moveTimes=0;
    });
    // init the position of links
    for(var i in links){
      initdeg = getTruePos(links[i][1]);
      lele = document.querySelector('.'+i);
      lele.style.left=initdeg[0]-(ll+lr*1.5)/2;
      lele.style.top=initdeg[1]-lr/2;
      lele.dataset.href=links[i][3];
    }
    document.querySelector('#CLINK').className='';
    window.addEventListener('touchmove',function(e){
      if(onReverse) return;
      moveTimes++;
      if(onTouch && moveTimes>4)
        moveLinks(e.changedTouches[0].clientY);
    });
    
  }
  function fixPosition(){
    var deltaFix = 0,pred=links[centerKey][2];
    if(links[centerKey][2]<300 && links[centerKey][2]>240) {
      if(Math.abs(links[centerKey][2]-270)>15)
        if(links[centerKey][2]>270)
          moveLinks(ly-1);
        else
          moveLinks(ly+1);
      else
        if(links[centerKey][2]<270)
          moveLinks(ly-1);
        else
          moveLinks(ly+1);

      if((pred>=270&&links[centerKey][2]<=270)||(pred<=270&&links[centerKey][2]>=270))
        moveEnd();
      else
        setTimeout(fixPosition,50);
    }else
      setTimeout(moveEnd,100);
  }
  function moveEnd(){
    onTouch = false;
    lastCenterKey = centerKey;
    if(Math.abs(links[reverseKey][2]-360)<10)
      reverseF = true;
    else
      reverseF = false;
    for(var i in links){
      if(Math.abs(links[i][2]-270)<15)
        centerKey = i;
      links[i][2] = links[i][2]%360;
    }
    if(document.querySelector('.center'))
      document.querySelector('.center').className = document.querySelector('.center').className.replace(' center','');
    document.querySelector('.'+centerKey).className+=' center';
    if(centerKey == lastCenterKey) return;
    onReverse=true;
    reverseLink();
  }
  // reverse the invisible link to the top/bottom
  function reverseLink(){
    var ele = document.querySelector('.'+reverseKey);
    var degree;
    if(reverseF){
      links[reverseKey][2]+=1;
      links[reverseKey][2]=links[reverseKey][2]%360;
      degree=getTruePos(links[reverseKey][2]);
      ele.style.left=degree[0]-(ll+lr*1.5)/2;
      ele.style.top=degree[1]-lr/2;
      if(links[reverseKey][2]<210 || links[reverseKey][2]>270)
        setTimeout(reverseLink,5);
      else
        onReverse=false;
    }else{
      links[reverseKey][2]-=1;
      links[reverseKey][2]=links[reverseKey][2]%360;
      if(links[reverseKey][2]<0) links[reverseKey][2]=360;
      degree=getTruePos(links[reverseKey][2]);
      ele.style.left=degree[0]-(ll+lr*1.5)/2;
      ele.style.top=degree[1]-lr/2;
      if(links[reverseKey][2]<210 || links[reverseKey][2]>330)
        setTimeout(reverseLink,5);
      else
        onReverse=false;
    }
  }
  function onLinkClicked(e){
    var al;
    al = e;
    while(al.nodeName!='A') al=al.parentNode;
    if(al.dataset.href && document.querySelector('.'+centerKey)==al)
      window.location.href=al.dataset.href;
  }
  // move links
  function moveLinks(cury){
    var hdeg=0,ldeg=360;
    var hkey,lkey;
    var deltM = 0,curDeg;
    if(!onTouch || onReverse) return;
    if(cury<=ly)
      deltM+=1.5;
    else
      deltM-=1.5;
    if(links[centerKey][2]>=300 || links[centerKey][2]<=240) {
      moveEnd();
      return;
    }
    ly = cury;
    for(var i in links){
      links[i][2]+=deltM;
      curDeg = getTruePos(links[i][2]);
      document.querySelector('.'+i).style.left=curDeg[0]-(ll+lr*1.5)/2;
      document.querySelector('.'+i).style.top=curDeg[1]-lr/2;
      if(links[i][2]>hdeg){
        hdeg = links[i][2];
        hkey = i;
      }
      if(links[i][2]<ldeg){
        ldeg = links[i][2];
        lkey = i;
      }
    }
    if(deltM>0)
      reverseKey = hkey;
    else
      reverseKey = lkey;
  }

  function reCalculate(ratio){
    if(ratio<=bgOptions.ratio)
      bgOptions.scale = (availHeight/bgOptions.bgHeight).toFixed(3);
    else
      bgOptions.scale = (availWidth/bgOptions.bgWidth).toFixed(3);
    bgOptions.circleX *= bgOptions.scale;
    bgOptions.circleY *= bgOptions.scale;
    bgOptions.circleRadius *= bgOptions.scale;
  }

  function getTruePos(deg){
    var a,b,c,r=bgOptions.circleRadius;
    var x = bgOptions.circleX;
    var y = bgOptions.circleY - r;
    var caldeg = 0;
    deg = deg%360;
    if(deg<90)
      caldeg = deg;
    else if(deg>=90 && deg<180)
      caldeg = 180 - deg;
    else if(deg>=180 && deg<270)
      caldeg = deg - 180;
    else if(deg>=270)
      caldeg = 360 - deg;

    a = Math.sin(caldeg*2*Math.PI/360)*r;
    b = Math.cos(caldeg*2*Math.PI/360)*r;
    c = r - b;
    if(deg<=90 || deg>=270) {
      if(deg<=90)
        return [x+a,y+c];
      else
        return [x-a,y+c];
    }else {
      if(deg<=180)
        return [x+a,y+r+b];
      else
        return [x-a,y+r+b];
    }
  }